<template>
  <div class="page-header-container">
    <SidebarLogo :logo="logo">
      <div v-if="sysTitle.length === 0">
        {{ title }}
      </div>
      <div v-else class="top_title">
        <template v-for="(v,i) in sysTitle">
          <span
            :key="i"
            :class="{'main_head':i===0,'sub_head':i>0,'main_head_slicer':sysTitle.length > 1}"
          >
            {{ v }}
            <i v-if="i > 0&&sysTitle.length - 1 > i" class="el-icon-d-arrow-right" />
          </span>
        </template>
      </div>
    </SidebarLogo>

    <slot />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { title } from '@/wapp/settings'
export default {
    name: 'PageHeader',
    components: {
    },
    props: {
        sysTitle: { type: Array, default: function() { return [] } },
        sysLogo: { type: String, default: function() { return null } }
    },
    data() {
        return {
            title: title,
            logo: null
        }
    },
    computed: {
        ...mapGetters([
            'loginUser'
        ])
    },
    watch: {

    },
    created() {
        if (this.sysTitle.length > 1) {
            document.title = this.sysTitle[1] + '-' + this.sysTitle[0]
        } else {
            document.title = this.sysTitle[0]
        }
        this.logo = this.sysLogo || process.env.VUE_APP_BASE_API + '/base/sysSetup/downloadLogoBySysCode?sysCode=' + this.loginUser.sysCode
    },
    mounted() {
        const cookieStyle = this.Cookies.get('uiStyle')
        let style = ''
        if (cookieStyle !== this.loginUser.uiStyle) {
            style = this.loginUser.uiStyle
            this.Cookies.set('uiStyle', style)
        } else {
            style = cookieStyle
        }
        document.querySelector('body').setAttribute('id', this.loginUser.orgCode !== 'plat' ? style : 'skinScienceBlue')
        this.nickname = this.loginUser.nickname
    },
    methods: {

    }
}
</script>

<style scoped lang="scss">
.page-header-container{
    background-color: var(--bgColor);
    color:var(--textColor);

    /deep/ .sidebar-logo-container{
      display: contents;

      .sidebar-logo-link{
        .sidebar-logo{
            margin-left:20px;
            height: 36px;
            width: 36px;
          }
      }
    }

    .top_title{
        &>span{
            display: inline-block;
        }
        .main_head{
            font-size: 22px;
            &.main_head_slicer{
                padding-right: 10px;
                margin-right: 10px;
                position: relative;
                &::after{
                    content: '';
                    position: absolute;
                    right: 0;
                    width: 1px;
                    height: 22px;
                    top: 14px;
                    background: #fff;
                    opacity: 0.2;
                }
            }
        }
        .sub_head{
            font-size: 16px;
            margin-right: 6px;
        }
    }

  .sidebar-logo-container {
    background: var(--bgColor);
    color: var(--textColor);
  }

  /deep/ .right-menu{
    height: 60px;
    margin-right: 10px;

    .el-button:hover{
      color: #409EFF!important;
      border-color: #c6e2ff!important;
      background-color: #ecf5ff!important;
    }
  }
}
</style>
